<template>
  <div class="warehouse-page">
    <el-card shadow="never" class="breadcrumb-card">
      <div class="breadcrumb-content">
        <div class="breadcrumb-title">
          <el-icon class="breadcrumb-icon">
            <Shop />
          </el-icon>
          <div>
            <p class="breadcrumb-subtitle">仓库管理 · 仓库信息</p>
            <h2 class="breadcrumb-heading">仓库信息管理</h2>
          </div>
        </div>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
          <el-breadcrumb-item>仓库信息管理</el-breadcrumb-item>
          <el-breadcrumb-item>仓库信息管理列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <el-card shadow="never" class="search-card">
      <div class="search-header">
        <div class="search-title">
          <el-icon class="search-icon"><Search /></el-icon>
          <span>筛选查询</span>
        </div>
      </div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item>
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入仓库编码/名称"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.principal"
            placeholder="请输入负责人"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.place"
            placeholder="请输入位置"
            clearable
            class="search-input"
          >
            <template #prefix>
              <el-icon><Location /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="search-actions">
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            :icon="Search"
            :loading="loading"
            @click="handleSearch"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计信息卡片 -->
    <div class="stats-cards">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-primary">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">仓库总数</div>
            <div class="stat-value">{{ info.totalCount }}</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-success">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">当前页数</div>
            <div class="stat-value">
              {{ info.Pageindex }} / {{ totalPages }}
            </div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon stat-icon-warning">
            <el-icon><Shop /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">已选数量</div>
            <div class="stat-value">{{ multipleSelection.length }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-card shadow="never" class="table-card">
      <div class="table-header">
        <div class="table-title">
          <el-icon><Document /></el-icon>
          <span>仓库列表</span>
        </div>
        <div class="table-actions">
          <el-button
            type="success"
            :icon="Plus"
            @click="flowAdd"
            class="action-btn"
          >
            新增仓库
          </el-button>
          <el-button
            type="danger"
            :icon="Delete"
            :disabled="multipleSelection.length === 0"
            @click="handleBatchDelete"
            class="action-btn"
          >
            批量删除 ({{ multipleSelection.length }})
          </el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        class="data-table"
        @selection-change="handleSelectionChange"
        :empty-text="loading ? '加载中...' : '暂无数据'"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="编号" width="180" align="center" />
        <el-table-column
          prop="warehousecode"
          label="仓库编码"
          width="190"
          show-overflow-tooltip
        />
        <el-table-column
          prop="warehousenmae"
          label="仓库名称"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="area"
          label="面积(m²)"
          width="120"
          align="right"
        />
        <el-table-column prop="principal" label="负责人" width="120" />
        <el-table-column
          prop="place"
          label="位置"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="remark"
          label="备注"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template v-slot="scope">
            <el-button
              type="primary"
              :icon="Edit"
              link
              size="small"
              @click="flowUpdate(scope.row)"
              class="table-action-btn"
            >
              编辑
            </el-button>
            <el-divider direction="vertical" />
            <el-button
              type="danger"
              :icon="Delete"
              link
              size="small"
              @click="open(scope.row.id)"
              class="table-action-btn"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div class="pagination-content">
          <div class="pagination-info">
            <span
              >共 <strong>{{ info.totalCount }}</strong> 条记录</span
            >
            <span class="pagination-divider">|</span>
            <span
              >每页显示 <strong>{{ info.PageSize }}</strong> 条</span
            >
          </div>
          <div class="pagination-controls">
            <el-button
              size="small"
              @click="gotoFirst"
              :disabled="info.Pageindex === 1"
              class="pagination-btn"
            >
              首页
            </el-button>
            <el-button
              size="small"
              @click="gotoPrev"
              :disabled="info.Pageindex === 1"
              class="pagination-btn"
            >
              上一页
            </el-button>
            <el-pagination
              v-model:current-page="info.Pageindex"
              v-model:page-size="info.PageSize"
              :page-sizes="[5, 10, 15, 20, 50]"
              background
              layout="sizes, prev, pager, next, jumper"
              :total="info.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              class="pagination-component"
            />
            <el-button
              size="small"
              @click="gotoNext"
              :disabled="info.Pageindex >= totalPages"
              class="pagination-btn"
            >
              下一页
            </el-button>
            <el-button
              size="small"
              @click="gotoLast"
              :disabled="info.Pageindex >= totalPages"
              class="pagination-btn"
            >
              尾页
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>

  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="960"
    class="warehouse-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    align-center
    destroy-on-close
  >
    <template #header>
      <div class="dialog-header">
        <div class="dialog-header-icon">
          <el-icon v-if="ruleForm.id === 0" class="header-icon-animation"
            ><Plus
          /></el-icon>
          <el-icon v-else class="header-icon-animation"><Edit /></el-icon>
        </div>
        <div class="dialog-header-content">
          <h3 class="dialog-title">{{ title }}</h3>
          <p class="dialog-subtitle">
            {{
              ruleForm.id === 0
                ? "请填写仓库的基本信息，带 * 的为必填项"
                : "请修改仓库的信息，带 * 的为必填项"
            }}
          </p>
        </div>
        <div class="dialog-header-decoration">
          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-circle circle-3"></div>
        </div>
      </div>
    </template>
    <div class="warehouse-form">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="130px"
        class="warehouse-form-container"
      >
        <div
          class="warehouse-section section-animation"
          style="animation-delay: 0.1s"
        >
          <div class="warehouse-section__title">
            <div class="section-icon-wrapper icon-bounce">
              <el-icon><Tickets /></el-icon>
            </div>
            <div class="section-title-content">
              <span class="section-title">基础信息</span>
              <span class="section-desc">仓库的基本编码和名称</span>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="仓库编码" prop="warehousecode" required>
                <div class="code-input-wrapper">
                  <div class="code-input-container">
                    <el-input
                      v-model="ruleForm.warehousecode"
                      :disabled="ruleForm.autoCode"
                      placeholder="请输入仓库编码或开启自动生成"
                      class="enhanced-input input-glow code-input-field"
                      size="large"
                      clearable
                    >
                      <template #prefix>
                        <el-icon class="input-icon"><Key /></el-icon>
                      </template>
                      <template #suffix v-if="ruleForm.autoCode">
                        <el-icon class="auto-code-badge">
                          <Check />
                        </el-icon>
                      </template>
                    </el-input>
                  </div>
                  <div class="code-switch-wrapper switch-container">
                    <div class="switch-label-left">
                      <el-icon class="switch-icon">
                        <Key />
                      </el-icon>
                      <span class="switch-text">编码模式</span>
                    </div>
                    <el-switch
                      v-model="ruleForm.autoCode"
                      inline-prompt
                      active-text="自动"
                      inactive-text="手动"
                      active-color="#667eea"
                      inactive-color="#dcdfe6"
                      @change="handleAutoCodeChange"
                      class="code-switch"
                    />
                    <div class="switch-label-right">
                      <el-icon v-if="ruleForm.autoCode" class="label-icon">
                        <Check />
                      </el-icon>
                      <span class="code-switch-label">
                        {{ ruleForm.autoCode ? "系统自动生成" : "手动输入" }}
                      </span>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="仓库名称" prop="warehousenmae" required>
                <el-input
                  v-model="ruleForm.warehousenmae"
                  placeholder="请输入仓库名称"
                  class="enhanced-input input-glow"
                  size="large"
                  clearable
                >
                  <template #prefix>
                    <el-icon class="input-icon"><Shop /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div
          class="warehouse-section section-animation"
          style="animation-delay: 0.2s"
        >
          <div class="warehouse-section__title">
            <div class="section-icon-wrapper icon-bounce">
              <el-icon><ScaleToOriginal /></el-icon>
            </div>
            <div class="section-title-content">
              <span class="section-title">容量位置</span>
              <span class="section-desc">仓库的面积和位置信息</span>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="面积" prop="area">
                <el-input
                  v-model="ruleForm.area"
                  type="number"
                  placeholder="请输入面积（平方米）"
                  class="enhanced-input input-glow"
                  size="large"
                  clearable
                >
                  <template #prefix>
                    <el-icon class="input-icon"><Rank /></el-icon>
                  </template>
                  <template #suffix>
                    <span class="input-suffix">m²</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="位置" prop="place">
                <el-input
                  v-model="ruleForm.place"
                  placeholder="请输入仓库位置"
                  class="enhanced-input input-glow"
                  size="large"
                  clearable
                >
                  <template #prefix>
                    <el-icon class="input-icon"><Location /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div
          class="warehouse-section section-animation"
          style="animation-delay: 0.3s"
        >
          <div class="warehouse-section__title">
            <div class="section-icon-wrapper icon-bounce">
              <el-icon><User /></el-icon>
            </div>
            <div class="section-title-content">
              <span class="section-title">负责人信息</span>
              <span class="section-desc">选择仓库的负责人员</span>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="负责人" prop="principal">
                <div class="principal-input-wrapper">
                  <div class="principal-input-container">
                    <el-input
                      v-model="ruleForm.principal"
                      placeholder="请选择负责人"
                      disabled
                      class="enhanced-input input-glow principal-input-field"
                      size="large"
                    >
                      <template #prefix>
                        <el-icon class="input-icon"><User /></el-icon>
                      </template>
                      <template #suffix v-if="ruleForm.principal">
                        <el-icon class="selected-badge">
                          <Check />
                        </el-icon>
                      </template>
                    </el-input>
                  </div>
                  <el-tooltip
                    content="点击选择负责人"
                    placement="top"
                    effect="dark"
                  >
                    <el-button
                      class="principal-picker-btn btn-pulse"
                      circle
                      type="primary"
                      :loading="userLoading"
                      @click="openPrincipalDialog"
                      size="large"
                    >
                      <el-icon><UserFilled /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
                <div v-if="ruleForm.principal" class="principal-selected-tip">
                  <el-icon class="tip-icon"><Check /></el-icon>
                  <span>已选择负责人：{{ ruleForm.principal }}</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div
          class="warehouse-section section-animation"
          style="animation-delay: 0.4s"
        >
          <div class="warehouse-section__title">
            <div class="section-icon-wrapper icon-bounce">
              <el-icon><InfoFilled /></el-icon>
            </div>
            <div class="section-title-content">
              <span class="section-title">备注信息</span>
              <span class="section-desc">补充说明仓库的其他信息（选填）</span>
            </div>
          </div>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <div class="textarea-wrapper">
                  <el-input
                    v-model="ruleForm.remark"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入备注信息（选填）"
                    class="enhanced-textarea textarea-glow"
                    maxlength="200"
                    show-word-limit
                  />
                  <div class="textarea-tips">
                    <el-icon class="tips-icon"><InfoFilled /></el-icon>
                    <span
                      >提示：备注信息用于补充说明仓库的其他相关信息，最多可输入200个字符</span
                    >
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          size="large"
          @click="dialogFormVisible = false"
          class="footer-btn footer-btn-cancel btn-hover-effect"
        >
          <el-icon><Close /></el-icon>
          <span>取消</span>
        </el-button>
        <el-button
          type="primary"
          size="large"
          @click="submitForm(ruleFormRef)"
          class="footer-btn footer-btn-submit btn-hover-effect"
        >
          <el-icon><Check /></el-icon>
          <span>确定保存</span>
        </el-button>
      </div>
    </template>
    <el-dialog
      v-model="userDialogVisible"
      title="选择负责人"
      width="720"
      :close-on-click-modal="false"
      append-to-body
    >
      <template #header>
        <div class="user-dialog-header">
          <el-icon class="user-dialog-icon"><UserFilled /></el-icon>
          <span>选择负责人</span>
        </div>
      </template>
      <div class="manager-search">
        <el-input
          v-model="userKeyword"
          placeholder="请输入姓名、工号或部门关键字进行搜索"
          clearable
          size="large"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <el-table
        :data="filteredUsers"
        v-loading="userLoading"
        height="380px"
        stripe
        class="user-table"
      >
        <el-table-column prop="username" label="姓名" width="140">
          <template #default="scope">
            <div class="user-name-cell">
              <el-icon><User /></el-icon>
              <span>{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="usernumber" label="工号" width="140" />
        <el-table-column prop="organname" label="部门">
          <template #default="scope">
            <el-tag type="info" effect="plain" size="small">
              {{ scope.row.organname }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="140" />
        <el-table-column label="操作" width="100" fixed="right" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              link
              @click="handlePrincipalPick(scope.row)"
              class="select-user-btn"
            >
              <el-icon><Check /></el-icon>
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  Shop,
  Search,
  User,
  Location,
  Tickets,
  ScaleToOriginal,
  InfoFilled,
  Edit,
  Delete,
  Plus,
  Refresh,
  DataAnalysis,
  Document,
  Key,
  Rank,
  UserFilled,
  Close,
  Check,
} from "@element-plus/icons-vue";
import https from "@/Http/http";
import axios from "axios";
import { onMounted, reactive, ref, computed } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { ElMessageBox } from "element-plus";
import router from "@/router";
onMounted(() => {
  warehouseShow();
});
const tableData = ref([]);
const loading = ref(false);
const info = reactive({
  Pageindex: 1,
  PageSize: 10,
  totalCount: 0,
  pageCount: 0,
});

const searchForm = reactive({
  keyword: "",
  principal: "",
  place: "",
});

const warehouseShow = () => {
  loading.value = true;
  const params: any = {
    Pageindex: info.Pageindex,
    PageSize: info.PageSize,
    Warehousecode: searchForm.keyword || undefined,
    Warehousenmae: searchForm.keyword || undefined,
    Principal: searchForm.principal || undefined,
    Place: searchForm.place || undefined,
  };
  https.Reads.get("/Warehouse/WarehouseList", { params })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data;
      info.totalCount = res.data.totalCount;
      info.pageCount = res.data.pageCount;
    })
    .catch((error) => {
      ElMessage.error("获取仓库列表失败，请稍后重试");
      tableData.value = [];
      info.totalCount = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSearch = () => {
  info.Pageindex = 1;
  warehouseShow();
};

const handleReset = () => {
  searchForm.keyword = "";
  searchForm.principal = "";
  searchForm.place = "";
  handleSearch();
};
const handleSizeChange = (val: number) => {
  info.PageSize = val;
  info.Pageindex = 1;
  warehouseShow();
};
const handleCurrentChange = (val: number) => {
  info.Pageindex = val;
  warehouseShow();
};

const totalPages = computed(() =>
  Math.max(1, Math.ceil(info.totalCount / info.PageSize))
);

const gotoFirst = () => {
  if (info.Pageindex !== 1) {
    info.Pageindex = 1;
    warehouseShow();
  }
};

const gotoPrev = () => {
  if (info.Pageindex > 1) {
    info.Pageindex -= 1;
    warehouseShow();
  }
};

const gotoNext = () => {
  if (info.Pageindex < totalPages.value) {
    info.Pageindex += 1;
    warehouseShow();
  }
};

const gotoLast = () => {
  if (info.Pageindex !== totalPages.value) {
    info.Pageindex = totalPages.value;
    warehouseShow();
  }
};

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  id: 0,
  warehousecode: "",
  warehousenmae: "",
  area: "",
  principal: "",
  place: "",
  remark: "",
  autoCode: false,
});
const dialogFormVisible = ref(false);
const title = ref();
const codingRuleId = ref<number | null>(null);
const userDialogVisible = ref(false);
const userKeyword = ref("");
const userList = ref<any[]>([]);
const userLoading = ref(false);
const filteredUsers = computed(() => {
  const keyword = userKeyword.value.trim().toLowerCase();
  if (!keyword) return userList.value;
  return userList.value.filter((item) =>
    ["username", "usernumber", "organname"]
      .map((key) => item[key]?.toString().toLowerCase() ?? "")
      .some((text) => text.includes(keyword))
  );
});

const fetchUserList = async () => {
  if (userLoading.value) return;
  userLoading.value = true;
  try {
    const res = await https.Reads.get("/RBAC/ShowUser", {
      params: { pageindex: 1, pagesize: 1000 },
    });
    userList.value = res.data?.data ?? [];
  } finally {
    userLoading.value = false;
  }
};

const openPrincipalDialog = () => {
  userDialogVisible.value = true;
  if (!userList.value.length) {
    fetchUserList();
  }
};

const handlePrincipalPick = (row: any) => {
  ruleForm.principal = row.username || "";
  userDialogVisible.value = false;
};

// 获取编码规则ID
const fetchCodingRuleId = async (): Promise<void> => {
  try {
    const { data } = await https.Reads.get<any>("/CodingRule");
    const list = data?.data || [];
    // 优先按目标表名，其次按名称关键字
    const hit =
      list.find((x: any) => x.targettablename === "warehouseModel") ||
      list.find((x: any) => String(x.rulename || "").includes("仓库")) ||
      list[0];
    codingRuleId.value = hit ? hit.id : null;
  } catch (e) {
    codingRuleId.value = null;
  }
};

// 生成仓库编码（基于时分秒变化生成唯一编码）
const generateWarehouseCode = async (): Promise<void> => {
  try {
    if (!codingRuleId.value) await fetchCodingRuleId();
    if (!codingRuleId.value) {
      // 基于时分秒生成唯一编码
      generateCodeByTime();
      return;
    }
    // 每次生成都传入当前时间，确保基于不同时间生成不同的编码
    const currentTime = new Date().toISOString();
    const res = await https.Writes.post<any>(
      "/CodingRule/Generate",
      {
        ispreview: true,
        customeventtime: currentTime,
      },
      { params: { id: codingRuleId.value } }
    );
    const code = res?.data?.data;
    // 如果后端返回空或相同编码，使用时间戳作为后备
    if (!code || code === ruleForm.warehousecode) {
      generateCodeByTime();
    } else {
      ruleForm.warehousecode = code;
    }
  } catch (e) {
    // 后备方案：确保每次都生成不同的编码（基于时分秒 + 随机数）
    generateCodeByTime();
  }
};

// 基于时分秒生成编码的辅助函数
// 使用时间戳和计数器确保每次生成都不同
let codeGenerationCounter = 0; // 全局计数器，确保每次生成都不同

const generateCodeByTime = (): void => {
  // 立即获取当前时间，确保每次调用都获取最新时间
  const now = new Date();
  const pad = (n: number, len: number = 2) => `${n}`.padStart(len, "0");

  // 获取时分秒和完整毫秒
  const hours = pad(now.getHours());
  const minutes = pad(now.getMinutes());
  const seconds = pad(now.getSeconds());
  const milliseconds = now.getMilliseconds();

  // 获取当前时间戳（毫秒级）
  const timestamp = Date.now();

  // 获取高精度时间（如果可用）
  let microSeconds = 0;
  if (typeof performance !== "undefined" && performance.now) {
    // performance.now() 返回自页面加载以来的毫秒数，包含小数部分（微秒级精度）
    const perfNow = performance.now();
    // 将微秒部分转换为整数（0-999）
    microSeconds = Math.floor((perfNow % 1) * 1000);
  } else {
    // 如果没有 performance API，使用随机数
    microSeconds = Math.floor(Math.random() * 1000);
  }

  // 递增计数器，确保即使在同一毫秒内也能生成不同的编码
  codeGenerationCounter = (codeGenerationCounter + 1) % 100000;

  // 生成唯一因子：使用时间戳的后4位 + 微秒的3位 + 计数器的后3位
  // 这样可以确保每次生成都不同
  const timestampSuffix = timestamp.toString().slice(-4).padStart(4, "0");
  const microSecondsStr = microSeconds.toString().padStart(3, "0");
  const counterStr = codeGenerationCounter.toString().padStart(5, "0");
  const counterSuffix = counterStr.slice(-3);

  // 组合唯一因子：时间戳后4位 + 微秒3位 + 计数器后3位 = 10位，取后6位
  const uniqueFactor = (
    timestampSuffix +
    microSecondsStr +
    counterSuffix
  ).slice(-6);

  // 生成格式：CK + 年月日 + 时分秒 + 完整毫秒(3位) + 唯一因子(6位)
  // 格式示例：CK202411131430521234567890（年月日时分秒毫秒唯一因子）
  const year = now.getFullYear();
  const month = pad(now.getMonth() + 1);
  const day = pad(now.getDate());
  const msStr = pad(milliseconds, 3); // 完整3位毫秒

  // 组合：CK + 年月日(8位) + 时分秒(6位) + 毫秒(3位) + 唯一因子(6位) = 24位
  ruleForm.warehousecode =
    "CK" +
    year +
    month +
    day +
    hours +
    minutes +
    seconds +
    msStr +
    uniqueFactor;
};

// 系统编号开关变化
const handleAutoCodeChange = async (v: boolean): Promise<void> => {
  if (v) {
    ruleForm.warehousecode = "";
    generateCodeByTime();
  } else {
    ruleForm.warehousecode = "";
  }
};

//打开弹框
const flowAdd = () => {
  title.value = "仓库信息新增";
  dialogFormVisible.value = true;
  ruleForm.id = 0;
  ruleForm.warehousecode = "";
  ruleForm.warehousenmae = "";
  ruleForm.area = "";
  ruleForm.principal = "";
  ruleForm.place = "";
  ruleForm.remark = "";
  ruleForm.autoCode = true; // 默认开启自动生成
  userKeyword.value = "";
  // 打开对话框后自动生成编码（基于当前时分秒）
  // 使用 nextTick 确保 DOM 更新后再生成编码
  setTimeout(() => {
    if (ruleForm.autoCode) {
      generateWarehouseCode();
    }
  }, 150);
};
const flowUpdate = (row: any) => {
  title.value = "仓库信息编辑";
  Object.assign(ruleForm, row);
  ruleForm.autoCode = false; // 编辑时默认关闭自动生成
  userKeyword.value = "";
  dialogFormVisible.value = true;
};

const rules = reactive<FormRules>({
  warehousecode: [
    { required: true, message: "仓库编码不可为空", trigger: "blur" },
  ],
  warehousenmae: [
    { required: true, message: "仓库名称不可为空", trigger: "blur" },
  ],
  area: [{ required: true, message: "面积不可为空", trigger: "blur" }],
  principal: [{ required: true, message: "负责人不可为空", trigger: "blur" }],
  place: [{ required: true, message: "位置不可为空", trigger: "blur" }],
  remark: [{ required: true, message: "备注不可为空", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (ruleForm.id == 0) {
        https.Writes.post("/Warehouse/WarehouseAdd", ruleForm).then((res) => {
          if (res.data.code == 1) {
            ElMessage.success(res.data.msg);
            dialogFormVisible.value = false;
            warehouseShow();
            return;
          } else {
            ElMessage.error(res.data.msg);
            return;
          }
        });
      } else {
        https.Writes.put("/Warehouse/WarehouseUpdate", ruleForm).then((res) => {
          if (res.data.code == 1) {
            ElMessage.success(res.data.msg);
            dialogFormVisible.value = false;
            warehouseShow();
            return;
          } else {
            ElMessage.error(res.data.msg);
            warehouseShow();
            return;
          }
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const open = (id: any) => {
  ElMessageBox.confirm("请问确认要删除吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      https.Writes.put("/Warehouse/WarehouseDelete", { id: id }).then((res) => {
        if (res.data.code == 1) {
          ElMessage.success(res.data.msg);
          warehouseShow();
          return;
        } else {
          ElMessage.error(res.data.msg);
          return;
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

const multipleSelection = ref(<any[]>[]);
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};
const handleBatchDelete = () => {
  // 步骤1：检查是否有选中的数据
  if (!multipleSelection.value.length) {
    ElMessage.warning("请选择需要删除的库区信息！");
    return;
  }
  const ids = multipleSelection.value.map((x) => x.id);
  // 步骤3：弹框确认是否删除
  ElMessageBox.confirm("确认要批量删除选中的库区信息吗？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 步骤4：点击“确认”后，发起删除请求
      https.Writes.delete("/Warehouse/ReservoirDeletes", {
        data: { ids }, // 把要删除的ID列表传给后端
      }).then((res) => {
        // 步骤5：处理后端返回的结果
        if (res.data.code == 1) {
          ElMessage.success(res.data.msg); // 删除成功提示
          warehouseShow(); // 重新加载列表（刷新页面数据）
        } else {
          ElMessage.error(res.data.msg); // 删除失败提示
        }
      });
    })
    .catch(() => {
      // 步骤6：点击“取消”后，提示“操作已取消”
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    });
};
</script>

<style scoped>
.warehouse-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.breadcrumb-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f9ff, #ffffff);
  border: 1px solid rgba(64, 158, 255, 0.1);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.05);
}

.breadcrumb-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.breadcrumb-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.breadcrumb-icon {
  font-size: 28px;
  color: #409eff;
}

.breadcrumb-subtitle {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.breadcrumb-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.search-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border: 1px solid rgba(64, 158, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-icon {
  font-size: 20px;
  color: #409eff;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.search-input {
  width: 240px;
}

.search-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stat-icon-primary {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: white;
}

.stat-icon-success {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  color: white;
}

.stat-icon-warning {
  background: linear-gradient(135deg, #e6a23c, #ebb563);
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(64, 158, 255, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-title .el-icon {
  font-size: 20px;
  color: #409eff;
}

.table-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 10px 20px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.data-table {
  width: 100%;
}

.data-table :deep(.el-table__header) {
  background-color: #f5f7fa;
}

.data-table :deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: 600;
  padding: 12px 0;
}

.data-table :deep(.el-table__row:hover) {
  background-color: #f5f9ff;
}

.table-action-btn {
  font-weight: 500;
  padding: 4px 8px;
  transition: all 0.2s ease;
}

.table-action-btn:hover {
  transform: scale(1.05);
}

.table-pagination {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.pagination-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #606266;
  font-size: 14px;
}

.pagination-info strong {
  color: #409eff;
  font-weight: 600;
}

.pagination-divider {
  color: #dcdfe6;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.pagination-component {
  margin: 0 8px;
}

.principal-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.principal-picker-btn {
  background: linear-gradient(135deg, #409eff, #36cfc9);
  border: none;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
}
.principal-picker-btn:focus,
.principal-picker-btn:hover {
  background: linear-gradient(135deg, #36cfc9, #67c23a);
  box-shadow: 0 6px 15px rgba(54, 207, 201, 0.4);
}
.principal-picker-btn :deep(.el-icon) {
  font-size: 18px;
}

.manager-search {
  margin-bottom: 12px;
}

/* 对话框样式 */
.warehouse-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.warehouse-dialog :deep(.el-dialog__wrapper) {
  padding: 0;
}

.warehouse-dialog :deep(.el-dialog__header) {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 16px 16px 0 0;
}

.warehouse-dialog :deep(.el-dialog__body) {
  padding: 28px;
  background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
  overflow: visible;
}

.warehouse-dialog :deep(.el-dialog__headerbtn) {
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.3s ease;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: absolute;
}

.warehouse-dialog :deep(.el-dialog__headerbtn:hover) {
  background: rgba(255, 255, 255, 1);
  transform: rotate(90deg);
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0 24px 28px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 16px 16px 0 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  margin-left: 0;
  margin-right: 0;
  padding-right: 0;
}

.dialog-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.dialog-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at top right,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.dialog-header-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.header-icon-animation {
  animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.dialog-header-content {
  flex: 1;
  z-index: 2;
  min-width: 0;
  padding-right: 60px;
  position: relative;
  max-width: calc(100% - 100px);
}

.dialog-title {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dialog-header-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: float 6s ease-in-out infinite;
  filter: blur(1.5px);
}

.circle-1 {
  width: 120px;
  height: 120px;
  top: -40px;
  right: -10px;
  animation-delay: 0s;
}

.circle-2 {
  width: 160px;
  height: 160px;
  top: 20px;
  right: -30px;
  animation-delay: 2s;
}

.circle-3 {
  width: 100px;
  height: 100px;
  top: 70px;
  right: 30px;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-20px, -20px) scale(1.1);
    opacity: 0.5;
  }
}

.warehouse-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  background: transparent;
}

.warehouse-form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.warehouse-form-container :deep(.el-form-item__label) {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
  padding-right: 12px;
}

.warehouse-form-container
  :deep(.el-form-item.is-required .el-form-item__label::before) {
  color: #f56c6c;
  font-weight: 700;
  margin-right: 4px;
}

.warehouse-section {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.warehouse-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.warehouse-section::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(102, 126, 234, 0.05) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.warehouse-section:hover {
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-4px);
}

.warehouse-section:hover::before {
  opacity: 1;
}

.warehouse-section:hover::after {
  opacity: 1;
}

.section-animation {
  animation: slideInUp 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.icon-bounce {
  animation: iconBounce 0.6s ease-out;
}

@keyframes iconBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.warehouse-section__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f2f5;
}

.section-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.section-icon-wrapper:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.section-icon-wrapper .el-icon {
  color: #ffffff;
  font-size: 22px;
}

.section-title-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #303133;
}

.section-desc {
  font-size: 13px;
  color: #909399;
  font-weight: 400;
}

/* 增强的输入框样式 */
.enhanced-input :deep(.el-input__wrapper) {
  border-radius: 10px;
  box-shadow: 0 0 0 1px #e4e7ed inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: #fafbfc;
}

.enhanced-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset, 0 2px 8px rgba(102, 126, 234, 0.1);
  background: #ffffff;
}

.enhanced-input :deep(.el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) inset,
    0 4px 12px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
  background: #ffffff;
}

.enhanced-input :deep(.el-input__prefix) {
  color: #909399;
  transition: color 0.3s ease;
}

.enhanced-input :deep(.el-input.is-focus .el-input__prefix) {
  color: #667eea;
}

.input-glow :deep(.el-input__wrapper) {
  position: relative;
}

.input-glow :deep(.el-input.is-focus .el-input__wrapper::after) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1),
    rgba(118, 75, 162, 0.1)
  );
  pointer-events: none;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

.input-icon {
  transition: all 0.3s ease;
}

.enhanced-input :deep(.el-input.is-focus .input-icon) {
  transform: scale(1.2);
  color: #667eea;
}

.input-suffix {
  color: #909399;
  font-size: 14px;
  padding-right: 8px;
  font-weight: 500;
}

.textarea-wrapper {
  position: relative;
}

.enhanced-textarea :deep(.el-textarea__inner) {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #e4e7ed inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
  font-family: inherit;
  padding: 14px 16px;
  line-height: 1.6;
  resize: vertical;
}

.enhanced-textarea :deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset, 0 2px 12px rgba(102, 126, 234, 0.1);
  background: #ffffff;
}

.enhanced-textarea :deep(.el-textarea.is-focus .el-textarea__inner) {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) inset,
    0 6px 20px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
  background: #ffffff;
}

.textarea-glow :deep(.el-textarea.is-focus .el-textarea__inner::after) {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.05),
    rgba(118, 75, 162, 0.05)
  );
  pointer-events: none;
}

.textarea-tips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 8px;
  border-left: 3px solid #667eea;
  font-size: 12px;
  color: #606266;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tips-icon {
  color: #667eea;
  font-size: 16px;
  flex-shrink: 0;
}

.textarea-tips span {
  line-height: 1.5;
}

/* 编码输入区域 */
.code-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.code-input-container {
  position: relative;
}

.code-input-field {
  width: 100%;
}

.auto-code-badge {
  color: #67c23a;
  font-size: 18px;
  animation: badgePulse 2s ease-in-out infinite;
  margin-right: 8px;
}

@keyframes badgePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.8;
  }
}

.code-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 12px;
  border: 2px solid rgba(102, 126, 234, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.code-switch-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(102, 126, 234, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.switch-container:hover {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
}

.switch-container:hover::before {
  left: 100%;
}

.switch-label-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}

.switch-icon {
  color: #667eea;
  font-size: 16px;
}

.switch-text {
  color: #303133;
}

.code-switch {
  flex-shrink: 0;
}

.code-switch :deep(.el-switch__core) {
  transition: all 0.3s ease;
  width: 50px;
  height: 26px;
}

.code-switch :deep(.el-switch__core::after) {
  width: 22px;
  height: 22px;
}

.switch-label-right {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 13px;
  font-weight: 500;
  min-width: 100px;
  justify-content: flex-end;
}

.code-switch-label {
  color: #606266;
  transition: color 0.3s ease;
}

.switch-container:hover .code-switch-label {
  color: #667eea;
  font-weight: 600;
}

.label-icon {
  color: #67c23a;
  font-size: 16px;
  animation: checkPulse 2s ease-in-out infinite;
}

@keyframes checkPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* 负责人输入区域 */
.principal-input-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}

.principal-input-container {
  flex: 1;
  position: relative;
}

.principal-input-field {
  width: 100%;
}

.principal-input-field :deep(.el-input__wrapper) {
  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
}

.selected-badge {
  color: #67c23a;
  font-size: 18px;
  animation: badgePulse 2s ease-in-out infinite;
  margin-right: 8px;
}

.principal-selected-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 8px;
  border-left: 3px solid #67c23a;
  font-size: 13px;
  color: #606266;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tip-icon {
  color: #67c23a;
  font-size: 16px;
}

.principal-picker-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.principal-picker-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.principal-picker-btn:hover::before {
  width: 200px;
  height: 200px;
}

.principal-picker-btn:hover {
  background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
  box-shadow: 0 10px 32px rgba(102, 126, 234, 0.6),
    0 0 0 4px rgba(102, 126, 234, 0.1);
  transform: scale(1.1) rotate(5deg);
}

.principal-picker-btn :deep(.el-icon) {
  font-size: 22px;
  position: relative;
  z-index: 1;
}

.btn-pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 6px 28px rgba(102, 126, 234, 0.6),
      0 0 0 8px rgba(102, 126, 234, 0.1);
  }
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
  margin-top: 12px;
  background: linear-gradient(to top, rgba(250, 251, 252, 0.5), transparent);
  padding-top: 20px;
}

.footer-btn {
  padding: 14px 32px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
  font-size: 15px;
  position: relative;
  overflow: hidden;
}

.footer-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.footer-btn:hover::before {
  width: 300px;
  height: 300px;
}

.footer-btn-cancel {
  background: linear-gradient(135deg, #f5f7fa 0%, #ebeef5 100%);
  color: #606266;
  border: 1px solid #dcdfe6;
}

.footer-btn-cancel:hover {
  background: linear-gradient(135deg, #ebeef5 0%, #e4e7ed 100%);
  color: #303133;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: #c0c4cc;
}

.footer-btn-submit {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  color: #ffffff;
}

.footer-btn-submit:hover {
  background: linear-gradient(135deg, #764ba2 0%, #f093fb 100%);
  box-shadow: 0 8px 28px rgba(102, 126, 234, 0.5);
  transform: translateY(-3px);
}

.btn-hover-effect {
  position: relative;
  z-index: 1;
}

.footer-btn-submit :deep(.el-icon),
.footer-btn-cancel :deep(.el-icon) {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.footer-btn:hover :deep(.el-icon) {
  transform: scale(1.2);
}

/* 负责人选择对话框 */
.user-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.user-dialog-icon {
  font-size: 22px;
  color: #409eff;
}

.manager-search {
  margin-bottom: 16px;
}

.manager-search :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

.user-table {
  border-radius: 8px;
  overflow: hidden;
}

.user-table :deep(.el-table__header) {
  background-color: #f5f7fa;
}

.user-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name-cell .el-icon {
  color: #409eff;
}

.select-user-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
</style>
